<template><div><h2 id="静态资源加载" tabindex="-1"><a class="header-anchor" href="#静态资源加载"><span>静态资源加载</span></a></h2>
<p><code v-pre>Dcat Admin</code>支持了<code v-pre>js</code>脚本按需加载的功能，开发者只需在控制器中或其他任意位置（包括<code v-pre>view</code>）中引入需要用到的<code v-pre>js</code>组件即可，而无需在项目初始化时引入所有的<code v-pre>js</code>组件。</p>
<h3 id="更改静态资源域名" tabindex="-1"><a class="header-anchor" href="#更改静态资源域名"><span>更改静态资源域名</span></a></h3>
<p>打开配置文件<code v-pre>config/admin.php</code>，找到<code v-pre>assets_server</code>参数进行更改即可；也可以在<code v-pre>.env</code>中加上</p>
<div class="language-dotenv line-numbers-mode" data-highlighter="prismjs" data-ext="dotenv" data-title="dotenv"><pre v-pre class="language-dotenv"><code><span class="line">ADMIN_ASSETS_SERVER=http://xxx.com</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h3 id="注册路径别名" tabindex="-1"><a class="header-anchor" href="#注册路径别名"><span>注册路径别名</span></a></h3>
<p>打开<code v-pre>app/Admin/bootstrap.php</code>，然后加入以下代码</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token class-name static-context">Admin</span><span class="token operator">::</span><span class="token function">asset</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">alias</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'@my-name1'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'assets/admin1'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token class-name static-context">Admin</span><span class="token operator">::</span><span class="token function">asset</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">alias</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'@my-name2'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'assets/admin2'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 也可以批量注册</span></span>
<span class="line"><span class="token class-name static-context">Admin</span><span class="token operator">::</span><span class="token function">asset</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">alias</span><span class="token punctuation">(</span><span class="token punctuation">[</span></span>
<span class="line">    <span class="token string single-quoted-string">'@my-name1'</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'assets/admin1'</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token string single-quoted-string">'@my-name2'</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'assets/admin2'</span><span class="token punctuation">,</span></span>
<span class="line"><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>使用别名</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token class-name static-context">Admin</span><span class="token operator">::</span><span class="token function">js</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'@my-name1/index.js'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token class-name static-context">Admin</span><span class="token operator">::</span><span class="token function">css</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'@my-name1/index.css'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="注册组件" tabindex="-1"><a class="header-anchor" href="#注册组件"><span>注册组件</span></a></h3>
<p>当某个组件的<code v-pre>js</code>和<code v-pre>css</code>文件比较多的话，我们可以把这些静态资源文件统一注册成一个组件，这样使用的时候会更方便。打开<code v-pre>app/Admin/bootstrap.php</code>，然后加入以下代码</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token class-name static-context">Admin</span><span class="token operator">::</span><span class="token function">asset</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">alias</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'@editor-md'</span><span class="token punctuation">,</span> <span class="token punctuation">[</span></span>
<span class="line">    <span class="token string single-quoted-string">'js'</span> <span class="token operator">=></span> <span class="token punctuation">[</span></span>
<span class="line">        <span class="token comment">// 支持使用路径别名</span></span>
<span class="line">        <span class="token string single-quoted-string">'@admin/dcat/plugins/editor-md/lib/raphael.min.js'</span><span class="token punctuation">,</span></span>
<span class="line">        <span class="token string single-quoted-string">'@admin/dcat/plugins/editor-md/lib/marked.min.js'</span><span class="token punctuation">,</span></span>
<span class="line">        <span class="token string single-quoted-string">'@admin/dcat/plugins/editor-md/lib/prettify.min.js'</span><span class="token punctuation">,</span></span>
<span class="line">        <span class="token string single-quoted-string">'@admin/dcat/plugins/editor-md/lib/jquery.flowchart.min.js'</span><span class="token punctuation">,</span></span>
<span class="line">        <span class="token string single-quoted-string">'@admin/dcat/plugins/editor-md/editormd.min.js'</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token punctuation">]</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token string single-quoted-string">'css'</span> <span class="token operator">=></span> <span class="token punctuation">[</span></span>
<span class="line">        <span class="token string single-quoted-string">'@admin/dcat/plugins/editor-md/css/editormd.preview.min.css'</span><span class="token punctuation">,</span></span>
<span class="line">        <span class="token string single-quoted-string">'@admin/dcat/extra/markdown.css'</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token punctuation">]</span><span class="token punctuation">,</span></span>
<span class="line"><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>使用</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token class-name static-context">Admin</span><span class="token operator">::</span><span class="token function">requireAssets</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string single-quoted-string">'@editor-md'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p>如果你只需要加载这个组件的<code v-pre>js</code>或<code v-pre>css</code>，并不想加载所有文件，那么可以用以下方法</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token comment">// 只加载js文件</span></span>
<span class="line"><span class="token class-name static-context">Admin</span><span class="token operator">::</span><span class="token function">js</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'@editor-md'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 只加载css文件</span></span>
<span class="line"><span class="token class-name static-context">Admin</span><span class="token operator">::</span><span class="token function">css</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'@editor-md'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>使用动态参数</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token keyword">use</span> <span class="token package">Dcat<span class="token punctuation">\</span>Admin<span class="token punctuation">\</span>Admin</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 注册前端组件别名</span></span>
<span class="line"><span class="token comment">// {lang} 为动态参数</span></span>
<span class="line"><span class="token class-name static-context">Admin</span><span class="token operator">::</span><span class="token function">asset</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">alias</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'@test'</span><span class="token punctuation">,</span> <span class="token punctuation">[</span></span>
<span class="line">    <span class="token string single-quoted-string">'js'</span> <span class="token operator">=></span> <span class="token punctuation">[</span><span class="token string single-quoted-string">'/vendor/test/js/{lang}.min.js'</span><span class="token punctuation">]</span><span class="token punctuation">,</span></span>
<span class="line"><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// {lang} 会被替换为 zh_CN</span></span>
<span class="line"><span class="token class-name static-context">Admin</span><span class="token operator">::</span><span class="token function">requireAssets</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'@test'</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string single-quoted-string">'lang'</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'zh_CN'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token comment">// 也可以这样使用</span></span>
<span class="line"><span class="token class-name static-context">Admin</span><span class="token operator">::</span><span class="token function">requireAssets</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'@test?lang=zh_CN'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="加载js脚本" tabindex="-1"><a class="header-anchor" href="#加载js脚本"><span>加载js脚本</span></a></h3>
<p><code v-pre>Admin::js</code>方法可以引入<code v-pre>js</code>脚本，使用如下：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token keyword">class</span> <span class="token class-name-definition class-name">UserController</span> extend Controller</span>
<span class="line"><span class="token punctuation">{</span></span>
<span class="line">    <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">index</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">        <span class="token class-name static-context">Admin</span><span class="token operator">::</span><span class="token function">js</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'/assets/js/index.js'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">        <span class="token class-name static-context">Admin</span><span class="token operator">::</span><span class="token function">js</span><span class="token punctuation">(</span><span class="token punctuation">[</span></span>
<span class="line">            <span class="token string single-quoted-string">'/assets/js/index2.js'</span></span>
<span class="line">        <span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="加载css脚本" tabindex="-1"><a class="header-anchor" href="#加载css脚本"><span>加载css脚本</span></a></h3>
<p><code v-pre>Admin::css</code>方法可以引入<code v-pre>css</code>脚本，使用如下：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token keyword">class</span> <span class="token class-name-definition class-name">UserController</span> extend Controller</span>
<span class="line"><span class="token punctuation">{</span></span>
<span class="line">    <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">index</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">        <span class="token class-name static-context">Admin</span><span class="token operator">::</span><span class="token function">css</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'/assets/css/index.css'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">        <span class="token class-name static-context">Admin</span><span class="token operator">::</span><span class="token function">css</span><span class="token punctuation">(</span><span class="token punctuation">[</span></span>
<span class="line">            <span class="token string single-quoted-string">'/assets/css/index2.css'</span></span>
<span class="line">        <span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="动态添加js代码" tabindex="-1"><a class="header-anchor" href="#动态添加js代码"><span>动态添加js代码</span></a></h3>
<p><code v-pre>Admin::script</code>方法可以动态添加<code v-pre>js</code>代码，使用如下：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">    <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">index</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">        <span class="token class-name static-context">Admin</span><span class="token operator">::</span><span class="token function">script</span><span class="token punctuation">(</span></span>
<span class="line">            <span class="token operator">&lt;&lt;</span><span class="token operator">&lt;</span><span class="token constant">JS</span></span>
<span class="line">    console<span class="token operator">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'Hello world!'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token constant">JS</span>            </span>
<span class="line">        <span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="动态添加css代码" tabindex="-1"><a class="header-anchor" href="#动态添加css代码"><span>动态添加css代码</span></a></h3>
<p><code v-pre>Admin::style</code>方法可以动态添加<code v-pre>css</code>代码，使用如下：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">    <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">index</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">        <span class="token class-name static-context">Admin</span><span class="token operator">::</span><span class="token function">style</span><span class="token punctuation">(</span></span>
<span class="line">            <span class="token operator">&lt;&lt;</span><span class="token operator">&lt;</span><span class="token constant">CSS</span></span>
<span class="line">    body <span class="token punctuation">{</span></span>
<span class="line">        color<span class="token punctuation">:</span> <span class="token comment">#333;</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"><span class="token constant">CSS</span>            </span>
<span class="line">        <span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="在模板中引入静态资源" tabindex="-1"><a class="header-anchor" href="#在模板中引入静态资源"><span>在模板中引入静态资源</span></a></h3>
<p>在模板中手动引入静态资源需要使用<code v-pre>admin_asset</code>函数：</p>
<div class="language-html line-numbers-mode" data-highlighter="prismjs" data-ext="html" data-title="html"><pre v-pre class="language-html"><code><span class="line">// 引入css</span>
<span class="line">&lt;link rel="stylesheet" href="{{ admin_asset("vendor/dcat-admin/dcat-admin/main.min.css") }}"></span>
<span class="line"></span>
<span class="line">// 引入js</span>
<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>{{ admin_asset('vendor/dcat-admin/dcat-admin/main.min.js')}}<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="在模板中添加js代码" tabindex="-1"><a class="header-anchor" href="#在模板中添加js代码"><span>在模板中添加js代码</span></a></h3>
<p>要在模板中添加的<code v-pre>js</code>代码需要放在<code v-pre>Dcat.ready</code>方法内执行，这样才能保证你的<code v-pre>js</code>代码在所有<code v-pre>js</code>脚本加载完成之后执行。</p>
<div class="language-html line-numbers-mode" data-highlighter="prismjs" data-ext="html" data-title="html"><pre v-pre class="language-html"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"></span>
<span class="line">Dcat<span class="token punctuation">.</span><span class="token function">ready</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">   console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'所有js都加载完成了'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></div></template>


